<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>MooGraph example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <!-- Scripts -->
    <script type="text/javascript" src="mootools-1.2.3-core-jm.js"></script>
    <script type="text/javascript" src="canvas.text.js"></script>
    <script type="text/javascript" src="moograph.js"></script>
    <script type="text/javascript">
        window.addEvent('domready', function(){
            var analytics = new MooGraph('analytics', {
                width: 800,
                formatTime:function(cnt){
                    return cnt+'h';
                },
                formatValue: function(val){
                    return val+' clicks';
                }
            });
            var keys = new Array();
            var vals = new Array();
            for(var i = 0; i < 21;i++){
                keys.push(i);
                vals.push(Math.round(Math.random()*10000));
            }
            analytics.addGraph(
                keys,
                vals
            );
            analytics.build();

            var click = new MooGraph('click', {
                width: 800,
                onClick:function(pt){
                    $('click_event').set('text', 'Clicked on point at '+pt.xval+'/'+pt.yval+'.');
                },
                space: 0.5
            });
            var keys = new Array();
            var vals = new Array();
            for(var i = 0; i < 11;i++){
                keys.push(i);
                vals.push(Math.round(Math.random()*100));
            }
            click.addGraph(
                keys,
                vals,
                {color:'#055'}
            );
            click.build();

            var multi = new MooGraph('multiple', {width: 800, height: 300, space: 1});
            var keys = new Array();
            var vals = new Array();
            for(var i = 0; i < 21;i++){
                keys.push(i);
                vals.push(Math.round(Math.random()*10000-2000));
            }
            multi.addGraph(
                keys,
                vals
            );
            var keys = new Array();
            var vals = new Array();
            for(var i = 0; i < 21;i++){
                keys.push(i);
                vals.push(Math.round(Math.random()*5000+3000));
            }
            multi.addGraph(
                keys,
                vals,
                {color:'#F60'}
            );
            var keys = new Array();
            var vals = new Array();
            for(var i = 0; i < 21;i++){
                keys.push(i);
                vals.push(Math.round(Math.random()*3000+1000));
            }
            multi.addGraph(
                keys,
                vals,
                {color:'#F0F'}
            );
            multi.build();
            var color = new MooGraph('colors', {width: 800, height: 400});

            var keys;
            var vals;
            for(var h=0;h<7;h++){
                keys = new Array();
                vals = new Array();
                for(var i = 0; i < 7;i++){
                    keys.push(i);
                    vals.push(Math.round(Math.random()*10000-2000));
                }
                color.addGraph(
                    keys,
                    vals
                );
            }
            color.build();

            var bullet = new MooGraph('bullets', {width: 600, height: 300});
            var keys;
            var vals;

            keys = new Array();
            vals = new Array();
            for(var i = 0; i < 7;i++){
                keys.push(i);
                vals.push(Math.round(Math.random()*10000-2000));
            }
            bullet.addGraph(
                keys,
                vals,
                {bullet: 'disc'}
            );

            keys = new Array();
            vals = new Array();
            for(var i = 0; i < 7;i++){
                keys.push(i);
                vals.push(Math.round(Math.random()*10000-2000));
            }
            bullet.addGraph(
                keys,
                vals,
                {bullet: 'square', size: 5}
            );

            keys = new Array();
            vals = new Array();
            for(var i = 0; i < 7;i++){
                keys.push(i);
                vals.push(Math.round(Math.random()*10000-2000));
            }
            bullet.addGraph(
                keys,
                vals,
                {bullet: 'diamond'}
            );

            keys = new Array();
            vals = new Array();
            for(var i = 0; i < 7;i++){
                keys.push(i);
                vals.push(Math.round(Math.random()*10000-2000));
            }
            bullet.addGraph(
                keys,
                vals,
                {bullet: 'disc', size: 2}
            );

            keys = new Array();
            vals = new Array();
            for(var i = 0; i < 7;i++){
                keys.push(i);
                vals.push(Math.round(Math.random()*10000-2000));
            }
            bullet.addGraph(
                keys,
                vals,
                {bullet: 'disc', size: 8}
            );

            keys = new Array();
            vals = new Array();
            for(var i = 0; i < 7;i++){
                keys.push(i);
                vals.push(Math.round(Math.random()*10000-2000));
            }
            bullet.addGraph(
                keys,
                vals,
                {bullet: 'diamond', size: 8}
            );
            bullet.build();
        });

    </script>
  </head>
  <body>
      <h1>MooGraph</h1>
      <p>The purpose of mooGraph is to build graphs like analytics ones using canvas. This is an alpha version use at you own risk !</p>

      <h2>Example 1</h2>
      <p>Let's have a analytics looking like example (With custom formats)</p>
      <div id="analytics"></div>
      <h2>Example 2</h2>
      <p>Handle click (click on bullets)</p>
      <div id="click"></div><br />
      <em><small><span id="click_event"></span></small></em>
      <h2>Example 3</h2>
      <p>Multiple charts</p>
      <div id="multiple"></div>
      <h2>Example 4</h2>
      <p>Default colors. There are 7 of them.</p>
      <div id="colors"></div>
      <h2>Example 5</h2>
      <p>Bullets styling, available styles are <em>disc</em>, <em>square</em> and <em>diamond</em>.</p>
      <div id="bullets"></div>

  </body>
</html>